<template>
  <section class="search">
    <HeaderTop title="搜索"></HeaderTop>
    <form action="#" class="search_form" @submit.prevent="search" ref="form">
      <input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input" v-model="keyword" />
      <input type="submit" name="submit" class="search_submit" />
    </form>
    <section class="list" ref="list" v-if="!noSearchShops">
      <ul class="list_container">
        <!-- :to="'/shop?id='+item.id" -->
        <router-link class="list_li" v-for="(item, index) in searchShops" :key="index"
        :to="{path:'/shop', query:{id:item.id}}" tag="li">
          <section class="item_left">
            <img :src="imgBaseUrl + item.image_path" class="restaurant_img"/>
          </section>
          <section class="item_right">
            <div class="item_right_text">
              <p>
                <span>{{item.name}}</span>
              </p>
              <p>月售 {{item.month_sales || item.recent_order_num}} 单</p>
              <p>{{item.delivery_fee || item.float_minimum_order_amount}} 元起送 / 距离 {{item.distance}}</p>
            </div>
          </section>
        </router-link>
      </ul>
    </section>
    <div class="search_none" v-else>很抱歉！无搜索结果！</div>
  </section>
</template>

<script>
  import BScroll  from 'better-scroll'
  import {mapState} from 'vuex'
  import HeaderTop from "../../components/HeaderTop/HeaderTop";
  export default {
    name: "Search",
    data() {
      return {
        imgBaseUrl: 'http://cangdu.org:8001/img/',
        keyword: '',
        noSearchShops: false, // 标识搜索结果
      }
    },
    computed: {
      ...mapState(['searchShops']),
      listHeight() {        
        // 设置 list 的高度，让其滚动没有 bug
        const height = document.body.clientHeight
        const headerHeight = 45
        const formHeight = this.$refs.form.clientHeight
        const footerHeight = 50
        return height - headerHeight - formHeight - footerHeight + 'px'
      },
    },
    mounted() {
      // 设置 list 的高度，让其滚动没有 bug
      const list = this.$refs.list
      list.style.height = this.listHeight
    },
    beforeDestroy () {
      // 离开搜索界面后，清空商家商品列表
      this.$store.dispatch('clearSearchShops')
    },
    methods: {
      search() {
        // 得到搜索关键字
        const keyword = this.keyword.trim()
        // 进行搜索
        if (keyword) {
          // this.noSearchShops = false // 也可以在这里设置为 false
          this.$store.dispatch('searchShops', keyword)
        }
      }
    },
    watch: {
      searchShops(value) {
        if (!value.length) { // 无搜索结果
          this.noSearchShops = true
        } else { // 有搜索结果
          this.noSearchShops = false
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new BScroll('.list')
            } else {
              this.scroll.refresh()
            }
          })
        }
      }
    },
    components: {
      HeaderTop,
    },
  };
</script>

<style lang="less">
  @import "../../common/less/mixins.less";
  .search {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .search_form {
      .clearFix;
      margin-top: 45px;
      background-color: #fff;
      padding: 12px 8px;
      input {
        height: 35px;
        padding: 0 4px;
        border-radius: 2px;
        font-weight: 700;
        outline: none;
        &.search_input {
          float: left;
          width: 79%;
          border: 4px solid #f2f2f2;
          font-size: 14px;
          color: #333;
          background-color: #f2f2f2;
        }
        &.search_submit {
          float: right;
          width: 18%;
          border: 4px solid #02a774;
          font-size: 16px;
          color: #fff;
          background-color: #02a774;
        }
      }
      
    }
    .list {
      // top: 150px;
      // left: 0;
      // right: 0;
      // bottom: 50px;
      // height: 100% - 50;
      // transform: translateY(-50px);
      overflow: hidden;
      .list_container {
        background-color: #fff;
        .list_li {
          display: flex;
          justify-content: center;
          padding: 10px;
          border-bottom: 1px solid @bc;
          .item_left {
            margin-right: 10px;
            .restaurant_img {
              display: block;
              width: 50px;
              height: 50px;
            }
          }
          .item_right {
            flex: 1;
            font-size: 12px;
            .item_right_text {
              p {
                line-height: 12px;
                margin-bottom: 6px;
                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }
    .search_none {
      margin: 0 auto;
      margin-top: 0.1125rem;
      color: #333;
      background-color: #fff;
      text-align: center;
    }
  }
</style>
